<template>
  <!-- 药品费详情 -->
  <Drawer
    title="详情"
    :visible="isShow"
    :header-color="'#e7ecf8'"
    width="70%"
    :footer-btns="[
      {
        text: '导出',
        type: 'info',
        icon: 'export',
        trigger: 'export',
      },
      {
        text: '打印',
        type: 'info',
        trigger: 'print',
      },
    ]"
    @cancel="cancel"
    @print="print"
    @export="exportBtn"
  >
    <div class="drawer-box">
      <div class="box-table">
        <el-table
          ref="tableref"
          v-loading="tableLoading"
          :data="tableChildrenData"
          border
          :header-cell-style="{ background: '#fafafa', borderColor: '#e7ecf8',textAlign:'center' }"
          header-row-class-name="ck-table-header"
          row-class-name="ck-table-row"
          size="small"
          row-key="code"
          height="100%"
          show-summary
          :summary-method="getSummaries"
        >
          <el-table-column label="基本信息" align="center" width="270">
            <el-table-column
              align="center"
              type="index"
              label="序号"
              width="50"
            />
            <el-table-column prop="deptCode" label="科室代码" width="80">
              <template slot-scope="scope">
                <div class="text-btn" @click="handleDept(scope.row)">
                  {{ scope.row.deptCode }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="deptName" label="科室名称" width="140" />
          </el-table-column>
          <el-table-column label="人员费用" align="center">
            <el-table-column prop="totalPersonnel" label="金额" width="140" align="right">
              <template slot-scope="scope">
                {{ scope.row.totalPersonnel | numberToCurrency }}
              </template>
            </el-table-column>
            <el-table-column prop="proportionPersonnel" label="占比%" width="140" align="right">
              <template slot-scope="scope">
                {{ scope.row.proportionPersonnel.toFixed(2) }}%
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="药品费用" align="center">
            <el-table-column prop="totalDrug" label="金额" width="140" align="right">
              <template slot-scope="scope">
                {{ scope.row.totalDrug | numberToCurrency }}
              </template>
            </el-table-column>
            <el-table-column prop="proportionDrug" label="占比%" width="140" align="right">
              <template slot-scope="scope">
                {{ scope.row.proportionDrug.toFixed(2) }}%
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="卫生材料费用" align="center">
            <el-table-column prop="totalSanitaryMaterials" label="金额" width="140" align="right">
              <template slot-scope="scope">
                {{ scope.row.totalSanitaryMaterials | numberToCurrency }}
              </template>
            </el-table-column>
            <el-table-column prop="proportionSanitaryMaterials" label="占比%" width="140" align="right">
              <template slot-scope="scope">
                {{ scope.row.proportionSanitaryMaterials.toFixed(2) }}%
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="固定资产折旧费" align="center">
            <el-table-column prop="totalFixed" label="金额" width="140" align="right">
              <template slot-scope="scope">
                {{ scope.row.totalFixed | numberToCurrency }}
              </template>
            </el-table-column>
            <el-table-column prop="proportionFixed" label="占比%" width="140" align="right">
              <template slot-scope="scope">
                {{ scope.row.proportionFixed.toFixed(2) }}%
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="无形资产折旧费" align="center">
            <el-table-column prop="totalIntangible" label="金额" width="140" align="right">
              <template slot-scope="scope">
                {{ scope.row.totalIntangible | numberToCurrency }}
              </template>
            </el-table-column>
            <el-table-column prop="proportionIntangible" label="占比%" width="140" align="right">
              <template slot-scope="scope">
                {{ scope.row.proportionIntangible.toFixed(2) }}%
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="提取医疗风险基金" align="center">
            <el-table-column prop="totalRisk" label="金额" width="140" align="right">
              <template slot-scope="scope">
                {{ scope.row.totalRisk | numberToCurrency }}
              </template>
            </el-table-column>
            <el-table-column prop="proportionRisk" label="占比%" width="140" align="right">
              <template slot-scope="scope">
                {{ scope.row.proportionRisk.toFixed(2) }}%
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="其他费用" align="center">
            <el-table-column prop="totalOther" label="金额" width="140" align="right">
              <template slot-scope="scope">
                {{ scope.row.totalOther | numberToCurrency }}
              </template>
            </el-table-column>
            <el-table-column prop="proportionOther" label="占比%" width="140" align="right">
              <template slot-scope="scope">
                {{ scope.row.proportionOther.toFixed(2) }}%
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="科室全成本合计" fixed="right" prop="totalSum" align="right" width="140">
            <template slot-scope="scope">
              {{ scope.row.totalSum | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column label="科室收入合计" fixed="right" prop="inComeAmount" align="right" width="140">
            <template slot-scope="scope">
              {{ scope.row.inComeAmount | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column label="收入-成本" fixed="right" prop="surplus" align="right" width="140">
            <template slot-scope="scope">
              {{ scope.row.surplus | numberToCurrency }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </Drawer>
</template>
<script>
export default {
  props: {
    // 接收父组件传来的值
    isShow: Boolean,
    tableChildrenData: Array
  },
  data() {
    return {
      total: 0,
      pageSize: 20,
      currentPage: 1,
      tableData: [],
      tableLoading: false
    }
  },
  updated() {
    if (this.$refs.tableref) {
      this.$refs.tableref.doLayout()
    }
  },
  methods: {
    // 关闭抽屉
    cancel() {
      this.$emit('handleCancle', { isShow: false })
    },
    // 导出
    exportBtn() {
      // console.log("导出");
    },
    // 打印
    print() {
      // console.log("打印");
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this._getData()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this._getData()
    },
    // 指定列求和
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
          return
        }
        const values = data.map((item) => Number(item[column.property]))
        if (index >= 3) {
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index].toFixed(2)
            // sums[index] += " 元";
          } else {
            sums[index] = 'N/A'
          }
        }
      })
      return sums
    }
  }
}
</script>
<style lang="less" scoped>
.el-table--mini,
.el-table--small,
.el-table__expand-icon {
  font-size: 14px !important;
}

.ck-table-header {
  th {
    background: #fafafa !important;
    height: 48px;
    color: #555555 !important;
  }
}
.pagenation-box {
  display: flex;
  padding-top: 2px;
  justify-content: flex-end;
}
.drawer-box {
  height: 100%;
}
.box-title {
  height: 44px;
  background: #f6f9fe;
  border-bottom: 1px solid #e7ecf8;
  font-size: 16px;
  color: #555555;
  line-height: 44px;
  padding-left: 10px;
  box-sizing: border-box;
}
.box-table {
  padding: 14px 10px 14px 10px;
  height: calc(100% - 78px);
  box-sizing: border-box;
}
</style>
